<template>
    <div class="dialog" v-show="visablute">
        <div class="open"></div>
        <div class="content">
            <div class="top">
                <span>默认标题</span>
                <i @click="classDialog">X</i>
            </div>
            <div class="cont">
                <slot name="cont"></slot>
            </div>
            <div class="foot">
                <slot name="foot"></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    name: 'MyDialogs',
    props: {
        visablute: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        classDialog() {
            this.$emit("classDialog", !this.visablute)
        }
    },
}
</script>
<style lang="scss" scoped>
.dialog {
    width: 100%;
    height: 100%;

    .open {
        width: 100%;
        height: 100%;
        background: #888;
        opacity: 0.6;
        position: fixed;
        left: 0;
        top: 0;
    }

    .content {
        width: 50%;
        height: 50%;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 10px;

        .top {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cont {
            width: 100%;
            height: 80%;
        }

        .foot {
            float: right;
        }
    }
}
</style>